<template>
    <el-button @click="show()" type="primary" plain>opShow</el-button>
    <el-button @click="upRank()" type="primary" plain>updateRank</el-button>
    <div id="mean300d-close-echart" :style="{ width: '1000px', height: '600px' }"></div>
</template>

<script setup>
import { onMounted, watch, reactive } from "vue";
import * as echarts from 'echarts'
import { weekStockSearch } from '@/stores/week'
import { storeToRefs } from 'pinia';
import { built300dEchatOption } from '@/myechart/multiYaxEchart'
import { getWeekData } from '@/service/week';
import { useRouteQuery } from "../utils/useRoute";
import { openNewTableDisplay } from "../router";
import { updateRank } from "../service/tradingRank";
import { ElMessage } from "element-plus";

const stockSearchStore = weekStockSearch()
let { input } = storeToRefs(stockSearchStore)

const state = reactive({
    opShow : true,
})

// 网址传参
let stock = useRouteQuery('stock')
if (stock) {
    input.value = stock
}

// 只监听pinia中某一个值的变化
watch(() => input.value, (newValue, oldValue) => {
    loadEchart()
})

let myChart = null
const initEchart = () => {
    myChart = echarts.init(document.getElementById('mean300d-close-echart'))
    myChart.resize({
        width: Math.min(1000, window.innerWidth / 1.5),
    });

    // 添加点击事件
    myChart.on('dblclick', function(params) {
        openNewTableDisplay(input.value, params.name)
    });
}

const loadEchart = () => {
    getWeekData(input.value).then(res => {
        let option = built300dEchatOption(res.data, state.opShow)
        myChart.setOption(option)
    })
}


const show = () => {
    state.opShow = !state.opShow
    loadEchart()
}

const upRank = () => {
    updateRank(input.value).then(res => {
        ElMessage({
            message: '更新成功',
            type: 'success',
        })
    })
}

onMounted(()=> {
    initEchart()
    loadEchart()
})
</script>